<script setup lang="ts">
import { centerListService } from '@/api/user'
import { useCenterStore } from '@/stores'

import { ref } from 'vue'
// const onEditChannel = (row) => {
//   console.log(row)
// }
// const onDelChannel = (row) => {
//   console.log(row)
// }

const centerTable = ref() // 中心列表
const loading = ref(false)
const currentPage3 = ref(5) //当前页
const pageSize3 = ref(5)
const useCenter = useCenterStore()

// 中心列表-请求
const centerList = async () => {
  loading.value = true
  const { data } = await centerListService()
  loading.value = false
  centerTable.value = data
  console.log(data, '中心')
}
centerList()

// 点击查看
const centerSee = (row: any) => {
  console.log(row, '点击的那个中心打开这个弹框')
  useCenter.centerChange(true)
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

// // 添加中心保存
// const submitForm = async () => {
//   await FireCenterDetailsForm1.value.formRef.validate()
//   console.log('过校验了没')
// }

// // 弹框打开时的回调
// const open = () => {
//   // 重置添加中心表单
//   FireCenterDetailsForm1.value.formRef.resetFields()
// }

// provide('centerList', centerList)
</script>

<template>
  <div class="institutionalFramework-page" v-if="!useCenter.centerChangeShow">
    <el-header>
      <!-- <el-card> -->
      <FormHeader @search="centerList"></FormHeader>
      <!-- </el-card> -->
    </el-header>
    <el-main>
      <el-card class="cardHeader">
        <!-- <el-button type="primary" @click="dialogVisible = true"
          >+ &nbsp;&nbsp;添加</el-button
        >
        <el-table
          v-loading="loading"
          :data="centerTable"
          style="width: 100%; margin-top: 1%"
          :border="true"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="55"
          />
          <el-table-column
            align="center"
            label="中心名称"
            prop="title"
          ></el-table-column>
          <el-table-column
            align="center"
            label="地址"
            prop="address"
          ></el-table-column>
          <el-table-column
            align="center"
            label="负责人 "
            width="80"
            prop="name"
          ></el-table-column>
          <el-table-column
            align="center"
            label="联系方式"
            width="160"
            prop="phone"
          ></el-table-column>
          <el-table-column
            align="center"
            width="80"
            label="中心人数"
            prop="number"
          ></el-table-column>
          <el-table-column
            align="center"
            width="80"
            label="装备数量"
            prop="equipment"
          ></el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template #default="{ row }">
              <el-button link type="primary" @click="centerSee(row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="唉哟~~没有数据额~~" />
          </template>
        </el-table> -->
        <MainTable
          :loading="loading"
          :centerTable="centerTable"
          @centerSeeRow="centerSee"
        ></MainTable>

        <el-pagination
          v-model:current-page="currentPage3"
          v-model:page-size="pageSize3"
          :pager-count="3"
          background
          layout="->,prev, pager, next, total"
          :total="centerTable?.length"
          class="mt-4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <ElDialogCommon></ElDialogCommon>
        <!-- <ElDialog></ElDialog> -->
        <!-- <el-dialog
          @open="open"
          center
          v-model="commonStore.dialogVisibleCommon"
          title="添加中心"
        >
          <FireCenterDetailsForm
            ref="FireCenterDetailsForm1"
          ></FireCenterDetailsForm>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm"> 保存 </el-button>
            </div>
          </template>
        </el-dialog> -->
      </el-card>
    </el-main>
  </div>
  <FireCenterDetails v-else></FireCenterDetails>
</template>

<style lang="scss" scoped>
.el-header {
  width: 100%;
  min-height: 100px;
  padding: 5px;
  margin-bottom: 10px;
  // .el-form-item {
  //   width: 350px;
  //   margin: 9px 0 9px 30px;
  // }
}
.el-main {
  width: 100%;
  min-height: 700px;
  padding: 5px;
  .cardHeader {
    padding: 3px 12px;
  }
  .mt-4 {
    margin-top: 20px;
  }
  .el-dialog {
    // .el-form {
    //   padding: 30px 55px 0 0;
    //   margin: 1% 5%;
    //   border-top: 1px solid #ccc;
    // }
    .dialog-footer {
      padding-bottom: 30px;
    }
  }
}
</style>
